<template>
	<view class="makeloans_counter">
		<view class="box1">
			<view class="top">
				<text class="top_t1">急用钱</text>
				<text class="top_t2">放薪贷</text>
			</view>
			<view class="bottom">
				<text>借款安心有保障</text>
				<text style="color: #ffc2c2;margin: 0 15rpx;">·</text>
				<text>服务放心还便捷</text>
			</view>
		</view>
		<view class="box2">
			<view class="box2_center">
				<view class="first">
					<text>最高借款额度（元）</text>
				</view>
				<view class="senconde">
					<text>200,000</text>
				</view>
				<view class="third">
					<text>1000元1天利息低质</text>
					<text style="color: #ff4658;">0.2</text>
					<text>元，</text>
					<text>领券最高免息</text>
					<text style="color: #ff4658;">30</text>
					<text>天</text>
				</view>
				<view class="four">
					<view class="four_counter">
						立即开通
					</view>
				</view>
				<view class="five">
					<view class="center">
						<view class="a">
							<image src="../../static/iamges/1@2x.png" mode="widthFix"></image>
							<text>身份认证</text>
						</view>
						<view class="a">
							<u-icon name="play-right-fill" style="color: #e4ebf8;"></u-icon>
						</view>
						<view class="a">
							<image src="../../static/iamges/2.png" mode="widthFix"></image>
							<text>官方审核</text>
						</view>
						<view class="a">
							<u-icon name="play-right-fill" style="color: #e4ebf8;"></u-icon>
						</view>
						<view class="a">
							<image src="../../static/iamges/3.png" mode="widthFix"></image>
							<text>急速放贷</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	    <view class="box3">
	    	<view class="box3_counter">
	    		<view class="first_box3">
	    			<image src="../../static/iamges/dai_1.png" mode="widthFix"></image>
					<text class="t1">放贷快</text>
					<text class="t2">30分钟内到账</text>
	    		</view>
				<view class="first_box3">
					<image src="../../static/iamges/dai_2.png" mode="widthFix"></image>
					<text class="t1">分期还</text>
					<text class="t2">最高12期</text>
				</view>
				<view class="first_box3">
					<image src="../../static/iamges/dai_3.png" mode="widthFix"></image>
					<text class="t1">利息低</text>
					<text class="t2">提前还免剩余利息</text>
				</view>
	    	</view>
	    </view>
	    <view class="box4">
	    	<view class="box4_counter">
	    		<view class="top">
	    			<text>热门活动</text>
	    		</view>
				<view class="bottom">
					<view class="item_1">
						<image src="../../static/iamges/fot_1.png" ></image>
						<text>放薪借入门</text>
					</view>
					<view class="item_1">
						<image src="../../static/iamges/fot_2.png" ></image>
						<text>领免息券</text>
					</view>
					<view class="item_1">
						<image src="../../static/iamges/fot_3.png" ></image>
						<text>新用户免息</text>
					</view>
					<view class="item_1">
						<image src="../../static/iamges/fot_4.png" ></image>
						<text>赚现金</text>
					</view>
				</view>
	    	</view>
	    </view>
	    <view class="box5">
	    	<text>放薪借服务由惠通金融有限公司提供</text>
			
	    </view>
	</view>
</template>

<script>
	export default {
		created(){
			console.log("22",this.$store.state.num)
		},
		data() {
			return {

			}
		},
		computed:{
			
		},
		methods: {
            
		}
	}
</script>

<style lang="scss" scoped>
	.makeloans_counter {
		box-sizing: border-box;
		height: 100vh;
		background-image: linear-gradient(to bottom,
				#ff4658, #ff4859, #ff4a5a, #fe525f, #ff5963, #ff6069, #fe797a,
				#fda09a, #fdb7b0, #fccbc4, #fcefec, #fbfbfb, #fbfbfb, #fbfbfb, #fcfcfc);

		.box1 {
			.top {
				display: flex;
				justify-content: center;

				.top_t1 {
					font-size: 60rpx;
					color: #ffffff;
				}

				.top_t2 {
					font-size: 60rpx;
					color: #ffffff;
					margin-left: 20rpx;
				}
			}

			.bottom {
				margin-top: 20rpx;
				text-align: center;
				font-size: 24rpx;
				color: #ffd9d9;
			}
		}

		.box2 {
			margin-top: 70rpx;
			padding: 0 24rpx;

			.box2_center {
				background-color: #ffffff;
				border-radius: 15rpx;

				.first {
					//border: 1px solid black;
					padding: 20rpx 0;
					font-size: 32rpx;
					color: #333333;
					text-align: center;
					font-weight: 500;
				}

				.senconde {
					font-size: 100rpx;
					font-weight: 600;
					text-align: center;
				}

				.third {
					text-align: center;
					margin-top: 20rpx;
				}

				.four {
					margin-top: 40rpx;
					padding: 20rpx 20rpx;

					.four_counter {
						color: #ffffff;
						background-color: #ff4658;
						text-align: center;
						font-size: 32rpx;
						border-radius: 15rpx;
						line-height: 90rpx;
					}
				}

				.five {
					padding: 35rpx 20rpx;
                    //border: 1px solid red;
					.center {
						display: flex;
						align-items: center;
						justify-content: space-between;
						.a {
							display: flex;
							align-items: center;							
							justify-content: space-between;
							image {

								width: 33rpx;
							}
							text{
								margin-left: 20rpx;
							}
							font-size: 28rpx;
						}
					}
				}
			}
		}
	    .box3{
			padding: 0rpx 24rpx;
			margin-top: 40rpx;
			.box3_counter{	
				display: flex;
				background-color: #ffffff;
			
				border-radius: 15rpx;
				padding: 40rpx 0;
				.first_box3{
					width: 33.33%;
					display: flex;
					flex-direction: column;
					align-items: center;
				
					image{
						width: 70rpx;
					}
					.t1{
						font-size: 32rpx;
						color: #333333;
						margin-top: 16rpx;
					}
					.t2{
						font-size: 20rpx;
						color: #999999;
						margin-top: 6rpx;
					}
				}
			}
		}
		.box4{
			padding: 0rpx 24rpx;
			margin-top: 40rpx;
			.box4_counter{
				background-color: #ffffff;			
				border-radius: 15rpx;
				.top{
					
					padding: 0 20rpx;
					font-size: 32rpx;
					font-weight: 600;
					text{
						//border: 1px solid red;
					     //padding: 20rpx 0;
						//margin-top: 30rpx;
						line-height: 80rpx;
					}
				}
				.bottom{
					display: flex;
					.item_1{
						width: 25%;
						display: flex;
						padding: 40rpx 0;
						flex-direction: column;
						align-items: center;
						image{
							width: 70rpx;
							height: 60rpx;
						}
						text{
							margin-top: 20rpx;
						}
					}
				}
			}
		}
		.box5{
			text-align: center;
			padding: 40rpx 0;
			background: #fbfbfb;
			font-size: 22rpx;
			color: #999999;
		}
	}
</style>
